{% extends 'base.html' %}
{% load staticfiles %}
{% block topfiles %}
    <link rel="icon" href="/static/img/logo.png" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href={% static  "css/index.css" %}>
    <link rel="stylesheet" type="text/css" href={% static  "font-awesome/css/font-awesome.min.css" %}>
    <link rel="stylesheet" type="text/css" href={% static  "css/bootstrap-datetimepicker.min.css" %}>
    <link rel="stylesheet" type="text/css" href={% static  "css/toastr.min.css" %}>
    <script src={% static 'js/moment-with-locales.js' %}></script>
    <script src={% static 'js/bootstrap-datetimepicker.min.js' %}></script>
    <script src={% static 'js/toastr.min.js' %}></script>
    <style>
        /*我的复选框*/
        .m-checkbox {
          display: inline-block;
          background: #fff;
          border-radius: 2px;
          color: #000;
          cursor: pointer;
        }
        .m-checkbox.is-checked svg {
          display: block;
        }
        .m-checkbox svg {
          display: none;
          width: 100%;
          height: 100%;
          vertical-align: middle;
        }
    </style>
{% endblock topfiles %}

{% block body %}
    <div class="myNavbar">
        <div class="logo1">
            <img src="/static/img/logo.png"/> <span class="title1">X-Ray Eye</span>
        </div>

        <div class="setting" style="margin-top: 10px">
            <a href="{% url 'xray:logout' %} " title="退出登录">
                <span class="glyphicon glyphicon-log-out"></span>
            </a>
        </div>
    </div>

    <div class="query">
        <form action="/{{ mode }}" class="form-query" role="form" method="get">
            <div class='col-sm-2'>
                <div class="form-group">
                    <label class="sr-only" for="name">名称</label>
                    {% if patient_id %}
                        <input type="text" class="form-control" name="patient_id" value="{{ patient_id }}"
                               placeholder="请输入患者ID">
                    {% else %}
                        <input type="text" class="form-control" name="patient_id"
                               placeholder="请输入患者ID">
                    {% endif %}
                </div>
            </div>

            <div class='col-sm-2'>
                <div class="form-group">
                    <label class="sr-only" for="name">名称</label>
                    {% if patient_name %}
                        <input type="text" class="form-control" name="patient_name" value="{{ patient_name }}"
                               placeholder="请输入患者姓名">
                    {% else %}
                        <input type="text" class="form-control" name="patient_name"
                               placeholder="请输入患者姓名">
                    {% endif %}
                </div>
            </div>

            <div class='col-sm-3' style="color: black">
                <div class='input-group ' id='datetimepicker1'>
                    {% if start_time %}
                        <input type='text' class="form-control" name="start_time" value="{{ start_time }}"
                               placeholder="起始时间"/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
						</span>
                    {% else %}
                        <input type='text' class="form-control" name="start_time" placeholder="起始时间"/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
						</span>
                    {% endif %}
                </div>
            </div>
            <div class='col-sm-3' style="color: black">
                <div class='input-group ' id='datetimepicker2'>
                    {% if end_time %}
                        <input type='text' class="form-control" name="end_time" value="{{ end_time }}"
                               placeholder="结束时间"/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
						</span>
                    {% else %}
                        <input type='text' class="form-control" name="end_time" placeholder="结束时间"/>
                        <span class="input-group-addon"><span class="glyphicon glyphicon-calendar"></span>
						</span>
                    {% endif %}
                </div>
            </div>
            <div class='col-sm-2'>
                <button type="submit" class="btn btn-default">查询</button>
                <button type="button" onclick="go_index()" class="btn btn-default">重置</button>
            </div>
        </form>
    </div>

    <div class="content">
        <div class="row" id="row1">
            <div class="col-md-1">
            </div>
            <div class="col-md-2">
                <H4>患者ID</H4>
            </div>
            <div class="col-md-2">
                <H4>姓名</H4>
            </div>
            <div class="col-md-1">
                <H4>性别</H4>
            </div>
            <div class="col-md-2">
                <H4>出生日期</H4>
            </div>
            <div class="col-md-2">
                <H4>最近检查时间</H4>
            </div>
            <div class="col-md-1">
                <H4>检查次数</H4>
            </div>
            <div class="col-md-1">
                <H4>收藏</H4>
            </div>
        </div>
        <div>
            {% for patient in patients_list %}
                <div class="bk">
                    <div class="row" onclick="show_cts(this)">
                        <div class="col-md-1">
                            <h5><span class="glyphicon glyphicon-chevron-right"></span></h5>
                        </div>
                        <div class="col-md-2">
                            <h5>{{ patient.patient_ID }}</h5>
                        </div>
                        <div class="col-md-2">
                            <h5>{{ patient.patient_name }}</h5>
                        </div>
                        <div class="col-md-1">
                            {% if patient.patient_sex == "M" %}
                                <h5>男</h5>
                            {% elif  patient.patient_sex == "F" %}
                                <h5>女</h5>
                            {% else %}
                                <h5>未知</h5>
                            {% endif %}
                        </div>
                        <div class="col-md-2">
                            <h5>{{ patient.patient_birthday }}</h5>
                        </div>
                        <div class="col-md-2">
                            <h5>{{ patient.studyinstance_set.all.0.study_instance_time }}</h5>
                        </div>
                        <div class="col-md-1">
                            <h5>{{ patient.studyinstance_set.all.count }}</h5>
                        </div>
                        <div class="col-md-1">
                            {% if patient.is_collect == 1  %}
                            <div class="m-checkbox is-checked " style="margin: 10px;width:20px;height:20px;">
                            {% else %}
                            <div class="m-checkbox " style="margin: 10px;width:20px;height:20px;">
                            {% endif %}
                                <svg width="100%" height="100%" viewBox="0 0 100 100">
                                    <path d="M 18,50 L 42,78 L 90,25" fill="none" stroke="#000000" stroke-width="10"></path>
                                </svg>
                            </div>
                        </div>
                    </div>
                    <div class="detail-info" style="margin: 5px">
                        <table class="table table-bordered text-center"
                               style="width:95%;margin:20px auto ;background-color: dimgrey">
                            <thead>
                            <tr>
                                <th>检查时间</th>
                                <th>检查描述</th>
                                <th>检查时年龄</th>
                                <th>影像数量</th>
                                <th>操作</th>
                            </tr>
                            </thead>
                            <tbody>
                            {% for studyinstance in patient.studyinstance_set.all %}
                                <tr>
                                    <td>{{ studyinstance.study_instance_time }}</td>
                                    <td>{{ studyinstance.study_description }}</td>
                                    <td>{{ studyinstance.inspection_age }}</td>
                                    <td>{{ studyinstance.sopinstance_set.all.count }}</td>
                                    <td class="option">
                                        <a href="{% url 'xray:show' studyinstance.id  mode data.page %}">
                                            <button style="width:90px;padding:0;height:34px;font-size:16px;" type="button" class="btn btn-primary">查看</button>
                                        </a>
                                        <!--
                                        <button type="button" class="btn btn-danger" disabled='true'>删除</button>
                                        -->
                                        {% if studyinstance.report_file_url  %}
                                        <button id="reportDown_{{ studyinstance.id }}" data-href="{{  studyinstance.report_file_url }}" style="width:90px;padding:0;height:34px;font-size:16px;" type="button" class="btn btn-primary down-btn" >报告下载</button>
                                        {% else %}
                                        <button id="reportDown_{{ studyinstance.id }}" style="width:90px;padding:0;height:34px;font-size:16px;" type="button" class="btn btn-primary down-btn" disabled='true'>报告下载</button>
                                        {% endif %}
                                        <button style="width:90px;padding:0;height:34px;font-size:16px;" type="button" class="btn btn-primary report-upload-btn" data-id="{{ studyinstance.id }}">报告上传</button>
                                    </td>
                                </tr>
                            {% endfor %}
                            </tbody>
                        </table>

                    </div>
                </div>
            {% empty %}
                <div style="text-align: center"><h4>未查询到相关患者。</h4></div>
            {% endfor %}

        </div>

        <div class="col-md-12">
            {% if data %}
                <ul id="pages" class="pagination">
                    <li><a {% if  data.page > 1 %}
                        href="?page={{ data.page |add:-1 }}&patient_id={{ patient_id }}&patient_name={{ patient_name }}&start_time={{ start_time }}&end_time={{ end_time }}"
                    {% elif  data.page == 1 %}
                        href="?page={{ 1 }}&patient_id={{ patient_id }}&patient_name={{ patient_name }}&start_time={{ start_time }}&end_time={{ end_time }}"
                    {% endif %} >上一页</a>
                        {% if data.first %}
                            <li>
                                <a href="?page=1&patient_id={{ patient_id }}&patient_name={{ patient_name }}&start_time={{ start_time }}&end_time={{ end_time }}">1</a>
                            </li>
                        {% endif %}
                    {% if data.left %}
                        {% if data.left_has_more %}
                            <li><span style="font-size: 15px">...</span></li>
                        {% endif %}
                        {% for i in data.left %}
                            <li>
                                <a href="?page={{ i }}&patient_id={{ patient_id }}&patient_name={{ patient_name }}&start_time{{ start_time }}&end_time={{ end_time }}">{{ i }}</a>
                            </li>
                        {% endfor %}
                    {% endif %}
                    <li class="active" style="background-color: #0e2ae0;"><a style="color: white"
                                                                             href="?page={{ data.page }}&patient_id={{ patient_id }}&patient_name={{ patient_name }}&start_time={{ start_time }}&end_time={{ end_time }}">{{ data.page }}</a>
                    </li>
                    {% if data.right %}
                        {% for i in data.right %}
                            <li>
                                <a href="?page={{ i }}&patient_id={{ patient_id }}&patient_name={{ patient_name }}&start_time={{ start_time }}&end_time={{ end_time }}">{{ i }}</a>
                            </li>
                        {% endfor %}
                        {% if data.right_has_more %}
                            <li style="background-color: white"><span style="font-size: 15px">...</span></li>
                        {% endif %}
                    {% endif %}
                    {% if data.last %}
                        <li>
                            <a href="?page={{ data.total_pages }}&patient_id={{ patient_id }}&patient_name={{ patient_name }}&start_time={{ start_time }}&end_time={{ end_time }}">{{ data.total_pages }}</a>
                        </li>
                    {% endif %}
                    <li>
                        <a {% if data.total_pages > data.page %}
                            href="?page={{ data.page |add:1 }}&patient_id={{ patient_id }}&patient_name={{ patient_name }}&start_time={{ start_time }}&end_time={{ end_time }}"
                        {% elif  data.total_pages == data.page %}
                            href="?page={{ data.page }}&patient_id={{ patient_id }}&patient_name={{ patient_name }}&start_time={{ start_time }}&end_time={{ end_time }}"
                        {% endif %} >下一页</a>
                    </li>
                </ul>
            {% endif %}
            <span><br/>当前系统共诊断:{{ count }} 名患者。</span><a href="{% url 'xray:conclusions' %}">下载AI报告</a>
        </div>


        <!-- 模态框 -->
        <div class="modal fade" id="myModal">
            <div class="modal-dialog">
                <div class="modal-content">

                    <!-- 模态框头部 -->
                    <div class="modal-header">
                        <h4 class="modal-title">郑重声明</h4>
                        <button type="button" class="close" data-dismiss="modal">&times;</button>
                    </div>

                    <!-- 模态框主体 -->
                    <div class="modal-body">
                        X-ray Eye系统只能用于科研和教学使用，不得用于临床诊断。
                    </div>

                    <!-- 模态框底部 -->
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                    </div>

                </div>
            </div>
        </div>

    </div>
    <input style="display:none;" type="file" id="uploadFileIpt"/>


    <script>
        $(function () {
            toastr.options.positionClass = 'toast-top-center';
            toastr.options.timeOut = 1000;

            $('#datetimepicker1').datetimepicker({
                format: 'YYYY-MM-DD hh:mm',
                locale: moment.locale('zh-cn')
            });
            $('#datetimepicker2').datetimepicker({
                format: 'YYYY-MM-DD hh:mm',
                locale: moment.locale('zh-cn')
            });

            // 改变选中状态
            $('.bk .m-checkbox').on('click', function (e) {
                e.stopPropagation();
                var is_collect = this.classList.contains('is-checked');
                this.classList.toggle('is-checked');
                var patientId = this.parentElement.parentElement.querySelector('div:nth-child(2)').innerText;
                $.ajax({
                    url: "http://" + window.location.host + "/updatePatientCollect/",
                    type: "POST",
                    data: {
                        patientId: patientId,
                        is_collect: is_collect
                    },
                    success: function (res) {}
                })
            })

            // 报告下载
            $('.down-btn').on("click", function () {
                let href = this.dataset.href+'?=t'+new Date().getTime();
                let arr = href.split('\\');
                let title = arr[arr.length-1];
                let link = document.createElement('a');
                link.style.display = 'none';
                link.download = title;
                link.href = href;
                // 触发点击
                document.body.appendChild(link);
                link.click();
                // 然后移除
                document.body.removeChild(link);
            })

            // 报告上传
            $('.report-upload-btn').on('click', function () {
                $('#uploadFileIpt').attr('accept', "application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document")
                $('#uploadFileIpt').attr('data-id', this.dataset.id);
                $('#uploadFileIpt').trigger('click');
            })
            $('#uploadFileIpt').on('change', function (e){
                var target = e.target;
                var id = target.dataset.id;
                var files = target.files;
                if(!files.length) {
                    return;
                }
                var file = files[0];
                let formData = new FormData();
                formData.append('file', file);
                formData.append('id', id);

                $.ajax({
                    url: "http://" + window.location.host + "/xray/uploadReportFile/",//json文件位置，文件名
                    type: "POST",
                    // 不修改 Content-Type 属性，使用 FormData 默认的 Content-Type 值
                    contentType: false,
                    // 不对 FormData 中的数据进行 url 编码，而是将 FormData 数据原样发送到服务器
                    processData: false,
                    data: formData,
                    success: function (res) {//请求成功完成后要执行的方法
                        toastr.success('上传成功');
                        var oA = $('#reportDown_'+id);
                        oA.attr('data-href', res.report_file_url);
                        oA.find('button').attr('disabled', false);
                    }
                })
            })

        });

        function allSiblings2(tag) {
            let parent = tag.parentNode;
            let bro = parent.children;
            let siblings = [];
            for (let i = 0; i <= bro.length - 1; i++) {
                if (bro[i] != tag) {
                    siblings.push(bro[i]);
                }
            }
            return siblings;
        }

        var flag1 = true

        function show_cts(obj) {
            if (flag1) {
                obj.parentElement.lastElementChild.style.display = "inherit";
                obj.parentElement.firstElementChild.firstElementChild.innerHTML = "<h5><span class='glyphicon glyphicon-chevron-down'></span></h5>";
                flag1 = false;
            } else {
                obj.parentElement.lastElementChild.style.display = "none";
                obj.parentElement.firstElementChild.firstElementChild.innerHTML = "<h5><span class='glyphicon glyphicon-chevron-right'></span></h5>"
                flag1 = true;
            }
            siblings = allSiblings2(obj.parentElement)

            for (let i = 0; i <= siblings.length - 1; i++) {
                siblings[i].lastElementChild.style.display = "none"
            }
        }


        function go_index() {
            window.location.href = "/{{ mode }}"
        }

        function go_study() {
            window.open("")

        }
    </script>

{% endblock body %}




